<template>
  <div class="flex">
    <header class="flex-row flex-vertical-center">
      <div src="@img/btn/GoBbck@2x.png" class="backBtn" @click="$router.back()"></div>
      <div class="com-input-container searchBar flex-grow flex-vertical-center">
        <x-icon type="ios-search-strong" size="20" class="searchIcon"></x-icon>
        <input type="text" v-model.trim="searchWord" placeholder="请输入关键词">
        <x-icon type="ios-close" size="15" class="clearBtn" @click="searchWord = ''" v-if="searchWord"></x-icon>
      </div>
    </header>

    <main class="flex-grow">
      <div class="subtitle flex-row flex-center flex-between">
        <strong>历史搜索</strong>
        <img src="@img/btn/delete_btn.png" width="30px">
      </div>
    </main>
  </div>
</template>

<script>
import localStorage from '@u/localStorage'
export default {
  data (){
    return {
      searchWord: ''
    }
  },

  methods: {
      
  }
}
</script>

<style lang="less" scoped>
header{
  height: 40px;
  padding: 3px 0 3px 16px;
  background-color: white;
  box-shadow: 0 1px 5px #ccc;
  z-index: 1;

  .backBtn{
    width: 30px;
    height: 30px;
    background-image: url('~@img/btn/GoBbck@2x.png');
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: left center;
  }

  .searchBar{
    height: 30px;
    background-color: #eee;
    margin-right: 60px;
    border-radius: 5px;
    position: relative;
  }

  .searchIcon{
    fill: #ccc;
    margin: 0 5px;
  }

  .clearBtn{
    fill: #666;
    margin: 0 5px;
  }
}

main{
  background-color: white;
  padding: 15px;
}
</style>